<template>
  <div class="login">
    <Form ref="formInline" :model="formInline" :rules="ruleInline">
      <h1>登录</h1>
      <div class="login-line login-head">
        <FormItem prop="user">
          <Input type="text" v-model="formInline.user" placeholder="用户名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
      </div>
      <div class="login-line">
        <FormItem prop="password">
          <Input type="password" v-model="formInline.password" placeholder="密码">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
      </div>
      <div class="login-line">
        <FormItem prop="verifycode">
          <div style="display:inline-flex">
            <Input type="text" class="verifycode" v-model="formInline.verifycode" placeholder="验证码">
              <Icon type="ios-infinite-outline" slot="prepend"></Icon>
            </Input>
            <img :src="verifycodeUrl" class="verify_img" @click="changeVerifycode()">
          </div>
        </FormItem>
      </div>
      <div class="login-line">
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
      </div>
    </Form>
  </div>
</template>

<script>
import axios from "@/assets/api/axios";
import qs from "qs";

export default {
  name: "login",
  data() {
    return {
      verifycodeUrl: null,
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        verifycode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.changeVerifycode();
  },
  methods: {
    changeVerifycode: function() {
      this.verifycodeUrl =
        "http://172.17.130.192:8080/sedata/syslogin/initVerifyCode?" +
        new Date().getTime();
    },
    handleSubmit(name) {
      axios({
        method: "post",
        url: "/syslogin/login",
        data: qs.stringify({
          username: this.formInline.user,
          password: this.formInline.password,
          reCode: this.formInline.verifycode
        }),
        withCredentials: true
      })
        .then(res => {
          // console.log(res.data);
          this.$Message.success("Success!");
          this.articles = res.data;
        })
        .catch(err => {
          this.$Message.error("Fail!");
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
.login {
  /* background-image: url("../assets/img/bg.svg"); */
  /* background-image: url("../assets/img/bg3.jpg"); */
  /* background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center left; */
  /* background-color: rgba(0,0,0,0.5); */
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
}
.login form {
  background-color: rgba(255, 255, 255, 0.9);
  /* background-color: rgba(117, 97, 97, 0.1); */
  width: 320px;
  position: absolute;
  border-radius: 7.5%;
  top: 50%;
  left: 50%;
  margin-left: -160px;
  margin-top: -200px;
  /* box-shadow: 10px 10px 5px #dfdcdc; */
}
.login form h1 {
  padding-top: 20px;
}
.login form .login-line {
  padding: 0 20px 0 20px;
}
.login form .login-head {
  margin-top: 30px;
}
.login form .verifycode {
  width: 60%;
}
.login form .verify_img {
  width: 50%;
  height: 36px;
  margin-left: 15px;
  border-radius: 3px;
  background-color: #fff;
  overflow: hidden;
}
.login form .verify_img:hover {
  cursor: pointer;
}
</style>
